$pic-Path:"/static/images";

.navWrap {
    position: absolute;
    width: 100%;
    // min-width: 1200px;
    height: 100%;
    // min-height: 600px;
    overflow: hidden;
    background-color: #f0edf1;

    .navBox {
        width: 200px;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 100;
        // overflow-y: scroll;
        // transition: width 0.3s linear;
        
        &.small {
            width: 64px;
            // transition: width 0.3s linear;

            .headerBigLogo {
                display: none;
            }

            .headerSmLogo {
                width: 64px;
                height: 100px;
                display: block;
                position: fixed;
                z-index: 200;
                background: linear-gradient(90deg, rgba(96, 197, 255, 1) 0%, rgba(66, 138, 245, 1) 100%);
            }
        }

        .headerBigLogo {
            width: 200px;
            height: 100px;
            display: block;
            position: fixed;
            z-index: 200;
            background: linear-gradient(90deg, rgba(96, 197, 255, 1) 0%, rgba(66, 138, 245, 1) 100%);

            i {
                width: 200px;
                height: 100px;
                float: left;
                background: url('#{$pic-Path}/bigLogo.png') no-repeat center center;
                background-size: 80%;
            }
        }

        .headerSmLogo {
            display: none;

            i {
                width: 64px;
                height: 100px;
                float: left;
                background: url('#{$pic-Path}/smLogo.png') no-repeat center center;
                background-size: 80%;
            }
        }


        .el-menu--collapse {
            height: calc(100% - 100px);
            border: none;
            margin-top: 100px;
        }

        .el-menu-vertical:not(.el-menu--collapse) {
            // width: 200px;
            height: calc(100% - 100px);
            border: none;
            margin-top: 100px;
            overflow-y: scroll;
            overflow-x: hidden;
            &::-webkit-scrollbar{
                width: 0;
            }

            // // 滚动条样式
            // &::-webkit-scrollbar {
            //     width: 4px;
            // }

            // &::-webkit-scrollbar-thumb {
            //     @include scrollCss-thumb()
            // }

            // &::-webkit-scrollbar-track {
            //     @include scrollCss-track()
            // }

            li {
                position: relative;

                &::after {
                    content: '';
                    position: absolute;
                    bottom: 0px;
                    left: 0;
                    height: 1px;
                    width: 200px;
                    background-color: rgba(255, 255, 255, 0.3);
                }

                &.el-menu-item.is-active {
                    background: #324B70 !important;
                    width: 210px;
                    position: relative;

                    .leftTop {
                        width: 0;
                        height: 0;
                        border-width: 0px 10px 10px 0;
                        border-style: solid;
                        border-color: transparent #f0edf1;
                        position: absolute;
                        top: 0;
                        right: 0;
                    }

                    .leftBottom {
                        width: 0;
                        height: 0;
                        border-width: 10px 10px 0px 0;
                        border-style: solid;
                        border-color: transparent #f0edf1;
                        position: absolute;
                        bottom: 0;
                        right: 0;
                    }
                }
            }
        }
    }

    .headerBox {
        width: calc(100% - 200px);
        height: 60px;
        position: relative;
        float: right;
        background-color: #fff;
        z-index: 100;

        &.long {
            width: calc(100% - 64px);
        }

        .headerCon {
            width: 160px;
            height: 60px;
            float: right;
            // background-color: pink;

            .msg {
                cursor: pointer;
                font-size: 20px;
                margin-top: 20px;
                float: left;
                margin-right: 20px;
            }

            .dropdownBox {
                float: left;
                line-height: 20px;
                margin-top: 20px;
                // margin-right: 20px;

                .el-dropdown-link {
                    cursor: pointer;
                    // color: #409EFF;
                }

                .el-icon-arrow-down {
                    font-size: 12px;
                }
            }
        }

    }

    .containerBox {
        width: calc(100% - 230px);
        height: calc(100% - 90px);
        position: relative;
        float: right;
        overflow-y: scroll;
        // margin-right: 15px;
        padding: 15px;

        // background-color: #fff;
        &.long {
            width: calc(100% - 94px);
            // margin-right: 15px;
        }
        // 滚动条样式
        &::-webkit-scrollbar {
            width: 4px;
            height: 4px;
        }
       
        &::-webkit-scrollbar-thumb {
            @include scrollCss-thumb()
        }

        &::-webkit-scrollbar-track {
            @include scrollCss-track()
        }
        .containerWrap{
            width: 100%;
            min-width: 1000px;
            // border-radius: 8px;
            .conHeader{
                width: calc(100% - 30px);
                height: 20px;
                line-height: 20px;
                padding: 10px 15px;
                background-color: #fff;
                .shu{
                    @include shu();
                }
                >span{
                    float: left;
                    margin-left: 5px;
                    font-size: 14px;
                    color: $font-9;
                    line-height: 20px;
                }
            }
            .conWrap{
                width: 100%;
                // padding: 15px 15px;
                margin-top: 15px;
            }
        }
        
    }
}